<template>
  <el-dialog
    v-model="visible"
    title="用户登录"
    width="400px"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeTab" class="login-tabs">
      <el-tab-pane label="用户登录" name="user"></el-tab-pane>
      <el-tab-pane label="商家登录" name="merchant"></el-tab-pane>
      <el-tab-pane label="管理员登录" name="admin"></el-tab-pane>
    </el-tabs>

    <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input 
          v-model="loginForm.password" 
          type="password" 
          placeholder="请输入密码"
          @keyup.enter="handleLogin"
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from 'axios'

export default {
  name: 'LoginDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'login-success'],
  data() {
    return {
      activeTab: 'user',
      loading: false,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
      this.resetForm()
    },
    resetForm() {
      this.$refs.loginForm?.resetFields()
      this.loginForm = {
        username: '',
        password: ''
      }
      this.activeTab = 'user'
    },
    async handleLogin() {
      try {
        const valid = await this.$refs.loginForm.validate()
        if (!valid) return

        this.loading = true
        
        const response = await axios.post('/api/auth/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        })

        if (response.data.success) {
          const { token, user } = response.data.data
          
          // 验证用户角色是否匹配
          if (user.userRole !== this.activeTab) {
            this.$message.error('用户角色不匹配，请选择正确的登录类型')
            return
          }

          // 存储用户信息
          localStorage.setItem('token', token)
          localStorage.setItem('userRole', user.userRole)
          localStorage.setItem('user', JSON.stringify(user))

          this.$emit('login-success')
          this.handleClose()
        } else {
          this.$message.error(response.data.message || '登录失败')
        }
      } catch (error) {
        console.error('登录错误:', error)
        this.$message.error(error.response?.data?.message || '登录失败，请重试')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.login-tabs {
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 